<template>
  <div class="youbi-settings">
    <h3>{{ $t('message.youbiSettings') }}</h3>
    
    <el-form :model="youbiSettingsForm" :rules="youbiSettingsRules" ref="youbiSettingsFormRef" label-width="200px">
      <el-form-item :label="$t('message.defaultYoubiAmountForNewUsers')" prop="defaultYoubiAmount">
        <el-input-number 
          v-model="youbiSettingsForm.defaultYoubiAmount" 
          :min="0" 
          :precision="2"
          :step="1"
          :placeholder="$t('message.pleaseEnterDefaultYoubiAmount')"
          style="width: 100%"
        ></el-input-number>
      </el-form-item>
      
      <el-form-item :label="$t('message.minYoubiBalanceForBooking')" prop="minYoubiBalance">
        <el-input-number 
          v-model="youbiSettingsForm.minYoubiBalance" 
          :min="0" 
          :precision="2"
          :step="1"
          :placeholder="$t('message.pleaseEnterMinYoubiBalance')"
          style="width: 100%"
        ></el-input-number>
      </el-form-item>
      
      <el-form-item :label="$t('message.youbiToCreditConversionRate')" prop="conversionRate">
        <el-input-number 
          v-model="youbiSettingsForm.conversionRate" 
          :min="0.01" 
          :precision="2"
          :step="0.01"
          :placeholder="$t('message.pleaseEnterConversionRate')"
          style="width: 100%"
        ></el-input-number>
        {{ $t('message.youbiPerCredit') }}
      </el-form-item>
      
      <el-form-item :label="$t('message.youbiBonusForReferral')" prop="referralBonus">
        <el-input-number 
          v-model="youbiSettingsForm.referralBonus" 
          :min="0" 
          :precision="2"
          :step="1"
          :placeholder="$t('message.pleaseEnterReferralBonus')"
          style="width: 100%"
        ></el-input-number>
      </el-form-item>
      
      <el-form-item :label="$t('message.maxYoubiTransferLimit')" prop="maxTransferLimit">
        <el-input-number 
          v-model="youbiSettingsForm.maxTransferLimit" 
          :min="0" 
          :precision="2"
          :step="1"
          :placeholder="$t('message.pleaseEnterMaxTransferLimit')"
          style="width: 100%"
        ></el-input-number>
      </el-form-item>
      
      <el-form-item :label="$t('message.youbiExpirationDays')" prop="expirationDays">
        <el-input-number 
          v-model="youbiSettingsForm.expirationDays" 
          :min="0" 
          :step="1"
          :placeholder="$t('message.pleaseEnterExpirationDays')"
          style="width: 100%"
        ></el-input-number> {{ $t('message.days') }}
      </el-form-item>
      
      <el-form-item>
        <el-button type="primary" @click="saveYoubiSettings">{{ $t('message.saveSettings') }}</el-button>
        <el-button @click="loadYoubiSettings">{{ $t('message.reset') }}</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { ref, onMounted, reactive } from 'vue';
import { ElMessage } from 'element-plus';
import { useI18n } from 'vue-i18n';
import { useAuthStore } from '@/stores/auth';

export default {
  name: 'YoubiSettings',
  setup() {
    const { t } = useI18n();
    const authStore = useAuthStore();
    
    // 优币设置表单数据
    const youbiSettingsForm = reactive({
      defaultYoubiAmount: 0,
      minYoubiBalance: 0,
      conversionRate: 1,
      referralBonus: 0,
      maxTransferLimit: 0,
      expirationDays: 365
    });
    
    const youbiSettingsFormRef = ref();
    
    // 表单验证规则
    const youbiSettingsRules = {
      defaultYoubiAmount: [
        { required: true, message: t('message.pleaseEnterDefaultYoubiAmount'), trigger: 'blur' },
        { type: 'number', min: 0, message: t('message.amountMustBePositive'), trigger: 'blur' }
      ],
      minYoubiBalance: [
        { required: true, message: t('message.pleaseEnterMinYoubiBalance'), trigger: 'blur' },
        { type: 'number', min: 0, message: t('message.amountMustBePositive'), trigger: 'blur' }
      ],
      conversionRate: [
        { required: true, message: t('message.pleaseEnterConversionRate'), trigger: 'blur' },
        { type: 'number', min: 0.01, message: t('message.conversionRateError'), trigger: 'blur' }
      ],
      referralBonus: [
        { required: true, message: t('message.pleaseEnterReferralBonus'), trigger: 'blur' },
        { type: 'number', min: 0, message: t('message.amountMustBePositive'), trigger: 'blur' }
      ],
      maxTransferLimit: [
        { required: true, message: t('message.pleaseEnterMaxTransferLimit'), trigger: 'blur' },
        { type: 'number', min: 0, message: t('message.amountMustBePositive'), trigger: 'blur' }
      ],
      expirationDays: [
        { required: true, message: t('message.pleaseEnterExpirationDays'), trigger: 'blur' },
        { type: 'number', min: 0, message: t('message.daysMustBePositive'), trigger: 'blur' }
      ]
    };
    
    // 获取优币设置
    const loadYoubiSettings = async () => {
      try {
        const response = await fetch('/api/admin/youbi/settings', {
          headers: {
            'Authorization': `Bearer ${authStore.token}`,
            'Content-Type': 'application/json'
          }
        });
        
        if (response.ok) {
          const data = await response.json();
          Object.assign(youbiSettingsForm, data);
        } else {
          ElMessage.error(t('message.failedToLoadYoubiSettings'));
        }
      } catch (error) {
        console.error('Error loading Youbi settings:', error);
        ElMessage.error(t('message.failedToLoadYoubiSettings'));
      }
    };
    
    // 保存优币设置
    const saveYoubiSettings = async () => {
      try {
        await youbiSettingsFormRef.value.validate();
        
        const response = await fetch('/api/admin/youbi/settings', {
          method: 'PUT',
          headers: {
            'Authorization': `Bearer ${authStore.token}`,
            'Content-Type': 'application/json'
          },
          body: JSON.stringify(youbiSettingsForm)
        });
        
        if (response.ok) {
          ElMessage.success(t('message.settingsSavedSuccessfully'));
        } else {
          const errorData = await response.json();
          ElMessage.error(errorData.message || t('message.settingsSaveFailed'));
        }
      } catch (error) {
        console.error('Error saving Youbi settings:', error);
        ElMessage.error(t('message.settingsSaveFailed'));
      }
    };
    
    onMounted(() => {
      loadYoubiSettings();
    });
    
    return {
      youbiSettingsForm,
      youbiSettingsFormRef,
      youbiSettingsRules,
      loadYoubiSettings,
      saveYoubiSettings
    };
  }
};
</script>

<style scoped>
.youbi-settings {
  padding: 20px;
}
</style>